Vue.config.productionTip = false

const vm = new Vue({
    el: '#app',
    data() {
        return {
            ws: null,
            cws: null,

            screenStream: null,     // 屏幕视频流
            screenRecorder: null,   // 屏幕记录

            cameraStream: null,
            cameraRecorder: null,
        }
    },
    mounted() {
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia || !navigator.mediaDevices.getDisplayMedia) {
            alert('mediaDevices does not support')
            return
        }
        // this.recordOpt = {
        //     mimeType: 'video/mp4'
        // }
    },
    methods: {
        // 录制屏幕
        startRecordScreen() {
            // 录制屏幕
            navigator.mediaDevices.getDisplayMedia({
                video: {
                    // 这里可以设置像素等等录制参数
                    // 不允许min??
                    // width: { min: 1280 },
                    // height: { min: 720 },
                    // frameRate: { min: 12 },
                    width: 1920,
                    height: 1080,
                    frameRate: 12,
                },
                audio: true
            }).then(stream => {
                // 打开websocket连接
                this.ws = new WebSocket("ws://192.168.80.3:3000")
                this.ws.onopen = () => {
                    console.log("ws conn succ")
                    // this.ws.send("s")
                    // 初始化屏幕录制器
                    this.screenStream = stream
                    this.screenRecorder = new MediaRecorder(stream)
                    this.$refs.screen.srcObject = stream
                    // 1000ms触发一次ondataavailable
                    this.screenRecorder.start(1000)
                    this.screenRecorder.ondataavailable = (e) => {
                        // e.data是视频的二进制数据
                        // 需要将数据发送到websocket
                        // console.log(e.data)
                        this.ws.send(e.data)
                    }
                }
                this.ws.onclose = (event) => {
                    console.log(event)
                    alert("ws close")
                }
            }).catch(err => {
                console.log("getDisplayMedia err", err)
            })
        },
        // 停止录制屏幕
        stopRecordScreen() {
            // 停止录制
            this.screenRecorder.stop()
            this.screenRecorder = null
            // 停止所有流式视频轨道
            this.screenStream.getTracks().forEach((track) => track.stop());
            // 释放getDisplayMedia或getUserMedia
            this.screenStream = null;
            // 关闭socket连接
            this.ws.close()
        },

        //录制摄像头
        startRecordCamera() {
            navigator.mediaDevices.getUserMedia({
                video: {
                    // 这里可以设置像素等等录制参数
                    // 不允许min??
                    // width: { min: 1280 },
                    // height: { min: 720 },
                    // frameRate: { min: 12 },
                    width: 1920,
                    height: 1080,
                    frameRate: 12,
                },
                audio: true
            }).then(stream => {
                // 打开websocket连接
                this.cws = new WebSocket("ws://192.168.80.3:3001")
                this.cws.onopen = () => {
                    console.log("cws conn succ")
                    // this.cws.send("s")
                    // 初始化屏幕录制器
                    this.cameraStream = stream
                    this.cameraRecorder = new MediaRecorder(stream)
                    this.$refs.camera.srcObject = stream
                    // 1000ms触发一次ondataavailable
                    this.cameraRecorder.start(1000)
                    this.cameraRecorder.ondataavailable = (e) => {
                        // e.data是视频的二进制数据
                        // 需要将数据发送到websocket
                        // console.log(e.data)
                        this.cws.send(e.data)
                    }
                }
                this.cws.onclose = (event) => {
                    console.log(event)
                    alert("cws close")
                }
            }).catch(err => {
                console.log("getUserMedia err", err)
            })
        },
        // 停止录制摄像头
        stopRecordCamera() {
            // 停止录制
            this.cameraRecorder.stop()
            this.cameraRecorder = null
            // 停止所有流式视频轨道
            this.cameraStream.getTracks().forEach((track) => track.stop());
            // 释放getDisplayMedia或getUserMedia
            this.cameraStream = null;
            // 关闭socket连接
            this.cws.close();
        },
    },
})